import {
  Button, Form, Input, notification,
} from 'antd'
import React, { PureComponent } from 'react'
import { testMaxComputeConnection } from '../api'

const { Item } = Form

export default class DataSource extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
    }
  }

  componentDidMount() {
  }

  testStorageFn = () => {
    const { form, id, clearTable } = this.props
    form.current.validateFields().then(values => {
      this.setState({
        loading: true,
      })
      testMaxComputeConnection({
        dsLink: values.dsLink,
        hiveSiteXmlPath: values.hiveSiteXmlPath,
        project: values.project,
        accessKey: values.accessKey,
        accessId: values.accessId,
        endPoint: values.endPoint,
        tunnelEndPoint: values.tunnelEndPoint,
        id,
      }).then((res) => {
        if (res.status === 200) {
          clearTable()
          notification.success({
            message: '连接测试',
            description: res.msg,
          })
          this.setState({
            loading: false,
          })
        } else {
          clearTable()
          notification.error({
            message: '连接测试',
            description: res.msg,
          })
          this.setState({
            loading: false,
          })
        }
      })
    })
  }

  render() {
    const { isCheck } = this.props
    return (
      <div>
        {/* <Item
          label="数据源名称"
          name="dsName"
          rules={[{ required: true, message: '请输入数据源名称' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入数据源名称"
          />
        </Item>
        <Item
          label="数据源描述"
          name="dsDesc"
          rules={[{ required: false }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入数据源描述"
          />
        </Item> */}
        <Item
          label="AccessKey ID"
          name="accessId"
          rules={[{ required: true, message: '阿里云账号的AccessKey ID' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="阿里云账号的AccessKey ID"
          />
        </Item>
        <Item
          label="AccessKey Secret"
          name="accessKey"
          rules={[{ required: true, message: '阿里云账号的AccessKey Secret' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="阿里云账号的AccessKey Secret"
          />
        </Item>
        <Item
          label="项目名称"
          name="project"
          rules={[{ required: true, message: '请输入项目名称' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入项目名称"
          />
        </Item>
        <Item
          label="Endpoint"
          name="endPoint"
          rules={[{ required: true, message: '请输入Endpoint' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="http://service.odps.aliyun.com/api"
          />
        </Item>
        <Item
          label="Tunnel EndPoint"
          name="tunnelEndPoint"
          autoComplete="off"
          rules={[{ required: true, message: '请输入Tunnel EndPoint' }]}
        >
          <Input.Password
            disabled={isCheck}
            autoComplete="new-password"
            placeholder="请输入Tunnel EndPoint"
          />
        </Item>
        <Item wrapperCol={{ offset: 6, span: 18 }}>
          <Button onClick={this.testStorageFn} loading={this.state.loading} type="primary">连接测试</Button>
        </Item>
      </div>
    )
  }
}
